<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('operation.activityData') }}</span><!--活动数据-->
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="userId">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" @giveParentData="appData" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="invitationCode">
                            <el-input v-model="form.invitationCode" :placeholder="$t('common.invitationCode')" clearable><!--邀请码--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="createTime" label=""><!--还款时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.createTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.startTime')"
                                    :end-placeholder="$t('common.endTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="total_number">
                    <span>{{ $t('common.totalNumberOfInvitations') }}: {{ totalInfo.fissionTotalCount }}</span><!--拉新总人数-->
                    <span>{{ $t('common.totalNumberOfApplicantsInvited') }}: {{ totalInfo.loanTotalCount }}</span><!--拉新总申请人数-->
                    <span>{{ $t('common.totalNumberOfSuccessfulLoansInvited') }}: {{ totalInfo.loanSuccessTotalCount }}</span><!--拉新总放款成功人数-->
                    <span>{{ $t('common.totalRepaymentsOfInvitations') }}: {{ totalInfo.repaySuccessTotalCount }}</span><!--拉新总还款数-->
                    <span>{{ $t('common.totalNumberOfOverdueInvitations') }}: {{ totalInfo.overdueTotalCount }}</span><!--拉新逾期总数-->
                    <span>{{ $t('common.totalInvitationSpend') }}: {{ totalInfo.totalWithdrawnAmount }}</span><!--拉新总支出-->
                </div>
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column label="UserId" prop="userId" min-width="120"></el-table-column>
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" min-width="150"><!--手机号码--></el-table-column>
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column :label="$t('common.invitationCode')" prop="invitationCode" min-width="120"><!--邀请码--></el-table-column>
                        <el-table-column :label="$t('common.invitationsNumber')" prop="invitationCount" min-width="120"><!--邀请人数--></el-table-column>
                        <el-table-column :label="$t('common.applicantsNumber')" prop="loanCount" min-width="120"><!--申请人数--></el-table-column>
                        <el-table-column :label="$t('common.successfulLoans')" prop="loanSuccessCount" min-width="120"><!--放款成功人数--></el-table-column>
                        <el-table-column :label="$t('common.currentOverdueNumber')" prop="overdueCount" min-width="120"><!--目前逾期未还人数--></el-table-column>
                        <el-table-column :label="$t('common.successfulRepayments')" prop="repaySuccessCount" min-width="120"><!--还款成功人数--></el-table-column>
                        <el-table-column :label="$t('common.cashWithdrawal')" prop="withdrawnAmount" min-width="180"><!--已提现金额--></el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->

    </div>
</template>

<script src="./main.js"></script>
<style lang="scss" scoped>
.total_number {
    margin-bottom: 16px;
    span {
        margin-right: 16px;
    }
}
</style>
